<template>
  <div class="collect-container">
    <search-header class="collect-header">
      <template v-slot:left>
        <router-link to="/setup">设置</router-link>
      </template>
      <template v-slot:mid> 收藏 </template>
      <template v-slot:right>
        <router-link to="/search">
          <van-icon name="search" size="25px"
        /></router-link>
      </template>
    </search-header>
    <div class="user-card">
      <div class="user-info">
        <h2><router-link to="/login" v-if="isLogin">登录</router-link></h2>
        <h2 v-if="!isLogin">欢迎你,{{ uname }}</h2>
        <p>登录账号，解锁同步功能收藏菜谱不丢失</p>
      </div>
    </div>
    <div class="content-box">
      <comp-title class="collect-title">菜谱收藏</comp-title>
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        image-size="50px"
        description="目前没有内容"
        v-show="isShow"
      />
      <comp-result-item
        v-show="!isShow"
        v-for="(item, index) in collectList"
        :key="item.id + index + item.name"
      >
        <div class="resItem" @click="showDesc(item.id)">
          <img :src="item.pic" alt="" />
          <div>
            <h4>{{ item.name }}</h4>
            <div class="introd">
              <p class="num">准备时长:{{ item.preparetime }}</p>
              <p class="time">亨饪时长：{{ item.cookingtime }}</p>
            </div>
          </div>
          <button @click.stop="deleteItem(item.id, $event)">删除</button>
        </div>
      </comp-result-item>
    </div>
  </div>
</template>

<script>
import CompResultItem from "../components/comp-resultItem.vue";
import CompTitle from "../components/comp-title.vue";
import searchHeader from "../components/search-header.vue";
export default {
  components: { searchHeader, CompTitle, CompResultItem },
  name: "Collection",

  data() {
    return {
      isShow: true,
      isLogin: true, //为true时，用户还未登录
      uname: "",
    };
  },
  methods: {
    showDesc(id) {
      // console.log(id);
      this.$router.push({
        path: "/detail",
        query: {
          id: id,
        },
      });
    },
    deleteItem(id) {
      this.collectList.some((item, i) => {
        if (item.id == id) {
          item.flag = false;

          this.collectList.splice(i, 1);
          console.log(this.collectList);
          this.$nextTick(() => {});
          return true;
        }
      });
    },
  },
  mounted() {
    // this.collectList = JSON.parse(localStorage.getItem("coll-list"));
    if (this.collectList) {
      this.isShow = false;
    }

    let user = JSON.parse(localStorage.getItem("userInfo"));
    if (user.isLogin == false) {
      this.isLogin = false;
      this.uname = user.uname;
    } else {
      this.isLogin = true;
    }
  },
};
</script>

<style lang="less" scoped>
.collect-container {
  padding-top: 50px;
}
.collect-header {
  position: absolute;
  top: 0;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #eee;
}
.user-card {
  position: absolute;
  top: 40px;
  // left: 0;
  width: 100%;
  padding-top: 20px;
  .user-info {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #ccc;
    h2 {
      margin-bottom: 20px;
      font-size: 30px;
      color: chocolate;
      a {
        color: chocolate;
      }
    }
    p {
      height: 30px;
      font-size: 14px;
    }
  }
}
.content-box {
  margin-top: 110px;
  padding: 15px;
  .collect-title {
    font-size: 20px;
    margin-bottom: 10px;
  }
}
.resItem {
  position: relative;
  display: flex;
  // justify-content: space-between;
  margin-bottom: 20px;
  img {
    width: 100px;
  }
  > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px 0 0 15px;
    h4 {
      font-size: 18px;
    }
    p {
      font-size: 14px;
    }
  }
  button {
    position: absolute;
    right: 0;
    top: 50%;
    font-size: 20px;
    height: 30px;
    padding: 5px 10px;
    background-color: #f00;
    color: #fff;
    transform: translateY(-50%);
    border-radius: 6px;
    margin-right: 5px;
  }
}
</style>